<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="Author" content="Tencent.AlloyTeam" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,target-densitydpi=medium-dpi" />

	<link rel="stylesheet" type="text/css" href="css/mui-base.css" />
	<link rel="stylesheet" type="text/css" href="css/mui-checkbox.css" />
	<style type="text/css">
		.container{
			padding: 10px;
		}
		h4{
			margin: 10px 0;
		}
	</style>
</head>

<div class="container">
	<h4>checkbox</h4>
	<p>
		<label id="checkbox" class="checkbox checkbox_white" for="cb0">
			<input id="cb0" name="cb0" type="checkbox" />
			<span class="checkbox_text">0</span>
		</label>
		<label id="bl_checkbox" class="checkbox checkbox_black" for="cb10" style="margin-top:10px;"> 
			<input id="cb10" name="cb10" type="checkbox" />
			<span class="checkbox_text">0</span>
		</label>
	</p>
	<h4>checkboxs in group</h4>
	<p>
		<fieldset id="checkboxlist" class="checkbox_group">
			<label class="checkbox checkbox_white" for="cb1">
				<input id="cb1" name="cb1" type="checkbox" />
				<span class="checkbox_text">1</span>
			</label>
		
			<label class="checkbox checkbox_white" for="cb2">
				<input id="cb2" name="cb2" type="checkbox" />
				<span class="checkbox_text">2</span>
			</label>
		
			<label class="checkbox checkbox_white" for="cb3">
				<input id="cb3" name="cb3" type="checkbox" />
				<span class="checkbox_text">3</span>
			</label>
		</fieldset>
		<fieldset id="bl_checkboxlist" class="checkbox_group" style="margin-top:20px">
			<label class="checkbox checkbox_black" for="cb11">
				<input id="cb11" name="cb11" type="checkbox" />
				<span class="checkbox_text">1</span>
			</label>
		
			<label class="checkbox checkbox_black" for="cb12">
				<input id="cb12" name="cb12" type="checkbox" />
				<span class="checkbox_text">2</span>
			</label>
		
			<label class="checkbox checkbox_black" for="cb13">
				<input id="cb13" name="cb13" type="checkbox" />
				<span class="checkbox_text">3</span>
			</label>
		</fieldset>

	
		<fieldset id="v_checkboxlist" class="checkbox_group vertical" style="margin-top:20px">
			<label class="checkbox checkbox_white" for="cb4">
				<input id="cb4" name="cb4" type="checkbox" />
				<span class="checkbox_icon"></span>
				<span class="checkbox_text">1</span>
			</label>
		
			<label class="checkbox checkbox_white" for="cb5">
				<input id="cb5" name="cb5" type="checkbox" />
				<span class="checkbox_icon"></span>
				<span class="checkbox_text">2</span>
			</label>
		
			<label class="checkbox checkbox_white" for="cb6">
				<input id="cb6" name="cb6" type="checkbox" />
				<span class="checkbox_icon"></span>
				<span class="checkbox_text">3</span>
			</label>
		</fieldset>


		<fieldset id="bl_v_checkboxlist" class="checkbox_group vertical" style="margin-top:20px">
			<label class="checkbox checkbox_black" for="cb14">
				<input id="cb14" name="cb14" type="checkbox" />
				<span class="checkbox_icon"></span>
				<span class="checkbox_text">1</span>
			</label>
		
			<label class="checkbox checkbox_black" for="cb15">
				<input id="cb15" name="cb15" type="checkbox" />
				<span class="checkbox_icon"></span>
				<span class="checkbox_text">2</span>
			</label>
		
			<label class="checkbox checkbox_black" for="cb16">
				<input id="cb16" name="cb16" type="checkbox" />
				<span class="checkbox_icon"></span>
				<span class="checkbox_text">3</span>
			</label>
		</fieldset>
	</p>	

</div>
<script type="text/javascript" src="js/JM.js"></script>
<script type="text/javascript" src="js/checkbox.js"></script>
<script type="text/javascript" src="js/checkboxlist.js"></script>
<script type="text/javascript">
	var cb = MUI.Checkbox({
		id:"checkbox"
	});
	var bl_cb = MUI.Checkbox({
		id:"bl_checkbox"
	});
	var cl = MUI.CheckboxList({
		id:"checkboxlist"
	});
	var bl_cl = MUI.CheckboxList({
		id:"bl_checkboxlist"
	});
	var v_cl = MUI.CheckboxList({
		id:"v_checkboxlist"
	});
	var v_cl = MUI.CheckboxList({
		id:"bl_v_checkboxlist"
	});
</script>
</body>
</html>
